﻿@page "/chart/inversed-axis"

@using Syncfusion.Blazor
@using Syncfusion.Blazor.Charts
@using PointRender

@inject NavigationManager NavigationManager
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample shows the inverted axis in the chart to plot the exchange rate over a period of time.</p>
</SampleDescription>
<ActionDescription>
    <p>In this example, you can see how to inverse the axis of the chart. Here both X and Y axis are inversed using the <code>IsInversed</code> property set to <code>true</code>.</p>
    <p><code>Tooltip</code> is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
    <p>More information about the inverse axis can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/chart/axis-customization/#inversed-axis'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <SfChart Title="Exchange Rate(INR per USD)" Theme="@Theme">
        <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>
        <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" OpposedPosition="true" IsInversed="true">
            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
        </ChartPrimaryXAxis>
        <ChartPrimaryYAxis IsInversed="true" EdgeLabelPlacement="EdgeLabelPlacement.Shift" LabelIntersectAction="LabelIntersectAction.Rotate45">
            <ChartAxisLabelStyle Color="transparent"></ChartAxisLabelStyle>
            <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
            <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
        </ChartPrimaryYAxis>
        <ChartTooltipSettings Enable="true"></ChartTooltipSettings>
        <ChartSeriesCollection>
            <ChartSeries DataSource="@ChartPoints" Name="Rate" XName="Year" Width="2" Opacity="1" YName="ExchangeRate" Type="ChartSeriesType.Column">
                <ChartMarker>
                    <ChartDataLabel Visible="true" Position="LabelPosition.Top">
                        <ChartDataLabelFont FontWeight="600" Color="#ffffff"></ChartDataLabelFont>
                    </ChartDataLabel>
                </ChartMarker>
            </ChartSeries>
        </ChartSeriesCollection>
        <ChartLegendSettings Visible="false"></ChartLegendSettings>
        <ChartEvents OnPointRender="PointRender"></ChartEvents>
    </SfChart>
</div>

@code{

    private Theme Theme { get; set; }
    public List<CategoryData> ChartPoints { get; set; } = new List<CategoryData>
    {
        new CategoryData { Year = "2008", ExchangeRate = 1.5 },
        new CategoryData { Year = "2009", ExchangeRate = 7.6 },
        new CategoryData { Year = "2010", ExchangeRate = 11 },
        new CategoryData { Year = "2011", ExchangeRate = 16.2 },
        new CategoryData { Year = "2012", ExchangeRate = 18 },
        new CategoryData { Year = "2013", ExchangeRate = 21.4 },
        new CategoryData { Year = "2014", ExchangeRate = 16 },
        new CategoryData { Year = "2015", ExchangeRate = 17.1 }
    };

    protected override void OnInitialized()
    {
        this.SetTheme(null);
    }

    public void PointRender(PointRenderEventArgs args)
    {
        this.SetTheme(args);
    }

    private void SetTheme(PointRenderEventArgs args)
    {
        if (NavigationManager.Uri.IndexOf("material") > -1)
        {
            if (args == null)
                Theme = Theme.Material;
            else
                args.Fill = PointColor.MaterialColors[args.Point.Index % 10];
        }
        else if (NavigationManager.Uri.IndexOf("fabric") > -1)
        {
            if (args == null)
                Theme = Theme.Fabric;
            else
                args.Fill = PointColor.FabricColors[args.Point.Index % 10];
        }
        else if (NavigationManager.Uri.IndexOf("bootstrap") > -1)
        {
            if (args == null)
                Theme = Theme.Bootstrap;
            else
                args.Fill = PointColor.BootstrapColors[args.Point.Index % 10];
        }
        else if (NavigationManager.Uri.IndexOf("highcontrast") > -1)
        {
            if (args == null)
                Theme = Theme.HighContrast;
            else
                args.Fill = PointColor.HighContrastColors[args.Point.Index % 10];
        }
        else
        {
            if (args == null)
                Theme = Theme.Bootstrap4;
            else
                args.Fill = PointColor.BootstrapColors[args.Point.Index % 10];
        }
    }

    public class CategoryData
    {
        public string Year { get; set; }
        public double ExchangeRate { get; set; }
    }
}

